<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js" type="text/javascript"charset="utf-8"></script>
    </head>

    <body>
        <!-- view -->
        <div id="vue">
            {{info.name}}
            {{info.address}}
            <a v-bind:href="info.url">链接</a>
        </div>


        <script type="text/javascript">
            let vm = new Vue({
                el: "#vue",
                data(){
                  return{
                    // 从钩子函数中获取响应的结果
                    info: { // 请求的返回参数格式必须和json字符串一样
                      name: null,
                      address: {
                        "street": null,
                        "city": null,
                        "country": null
                      },
                      url: null
                    }
                  }
                },
                mounted(){ // 钩子函数
                  // axios.get("../data/data.json").then(response=>(console.log(response.data))); // 链式编程
                  axios.get("http://localhost:63342/demo/data/data.json").then(response=>(this.info=response.data));
                }
            })
        </script>
    </body>
</html>